<template>
  <div class="drawer" :style="`width:${props.width};height:${props.height};${hide}`">
    <!-- 左 -->
    <div class="toggleBox absolute top-[50%] -right-32px -mt-96px" @click="toggleShow()" v-if="direction == 'left'">
      <img class="imgStyle" src="@/assets/img/drawer/left-sq.png" v-if='show' />
      <img class="imgStyle" src="@/assets/img/drawer/left-zk.png" v-else>
    </div>
    <!-- 右 -->
    <div class="toggleBox absolute top-[50%] -left-32px -mt-96px" @click="toggleShow()" v-if="direction == 'right'">
      <img class="imgStyle" src="@/assets/img/drawer/right-sq.png" v-if='show' />
      <img class="imgStyle" src="@/assets/img/drawer/right-zk.png" v-else>
    </div>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "100%",
  },
  direction: {
    type: String,
    default: "left",
  }
});

const emit = defineEmits(['click'])

let show = ref(true) //  默认展开状态
let hide = `${props.direction}:0` // 自定义展示位置

// 展开和收缩
const toggleShow = () => {
  show.value = !show.value
  if (show.value) {
    hide = `${props.direction}:0`
  } else {
    hide = `${props.direction}:-${props.width}`
  }
  emit('click') // 触发父组件事件
}
</script>
<style lang="scss" scoped>
.drawer {
  background: #5e5858;
  box-shadow: 4px 7px 8px 0px rgba(19, 73, 118, 0.41);
  border-radius: 0px 10px 10px 0px;
  position: fixed;
  top: 0;
  transition: all 0.3s;
  -moz-transition: all 0.3s;
  /* Firefox 4 */
  -webkit-transition: all 0.3s;
  /* Safari 和 Chrome */
  -o-transition: all 0.3s;
}

.toggleBox {
  cursor: pointer;
}

.imgStyle {
  @apply w-32px h-192px;
}
</style>